<!DOCTYPE html>
{% load static %}
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数据库备份</title>
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/adminlte/js/adminlte.min.js' %}"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.21/build/jquery.datetimepicker.full.js"></script>
    <script src="{% static 'plugins/toastr/toastr.min.js' %}"></script>

    <link rel="stylesheet" href="{% static 'plugins/adminlte/css/adminlte.min.css'%}">
    <link rel="stylesheet" href="{% static 'plugins/toastr/toastr.min.css'%}">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/jquery-datetimepicker@2.5.21/build/jquery.datetimepicker.min.css">
    <!-- Font Awesome -->
    <link href="{% static 'plugins/fontawesome-free/css/all.min.css'%}" rel="stylesheet">

</head>

<body class="content-wrapper" data-widget="iframe">
    {% csrf_token %}
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">数据库备份</h3>
                </div>
                <div class="card-body">
                    <small><strong>备份文件保存位置: </strong><cite>{{path}}</cite></small>
                    <hr>
                    <blockquote>
                        <h5>自动备份</h5>

                    </blockquote>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <button type="button" class="btn btn-primary">每日备份时间</button>
                        </div>
                        <!-- /btn-group -->
                        <input id="datetimepicker" style="width:20%;" type="text" value="01:00">
                    </div>
                    <p></p>
                    <div class="col-md-3">
                        <!-- /.input group -->
                        <a id="up" class="btn btn-app" style="margin:5px;">
                            <i class="fas fa-play"></i> 启动
                        </a>
                        <a id="down" class="btn btn-app" style="margin:5px;display: none;">
                            <i class="fas fa-pause"></i> 停止
                        </a>
                        <a id="restart" class="btn btn-app" style="margin:5px;display: none;">
                            <i class="fa fa-undo"></i> 重启
                        </a>
                    </div>
                    <hr>
                    <blockquote>
                        <h5>手动备份</h5>
                    </blockquote>
                    <div class="col-md-3">
                        <button id="bt_manual" type="button" class="btn btn-primary btn-block"><i id="bt_manual_icon"
                                class="fa fa-cog"></i>
                            手动备份</button>
                    </div>
                </div>

            </div>

        </div>
        </div>

    </section>

</body>
<script type="text/javascript">
    var job_status = "{{ status| safe }}";
    var job_time = "{{ begin_time| safe}}";
    // 根据后端传入的结果，设置自动备份时间和状态
    if (job_status == "1") {
        $("#down").show();
        $("#restart").show();
        $("#up").hide();
    } else {
        $("#down").hide();
        $("#restart").hide();
        $("#up").show();
    }
    // 设置自动备份时间
    $("#datetimepicker").val(job_time)

    $('#datetimepicker').datetimepicker({ lang: 'zh', format: 'H:i', datepicker: false });
    var csrf = $("input[name='csrfmiddlewaretoken']").val();
    function post(params, callback) {
        $.ajax({
            type: "POST",
            url: '{% url 'backupdb'%}',
            data: params,
            headers: { 'X-CSRFToken': csrf },
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                callback(data);
            }
        });
    };
    $(function () {
        // 绑定启动自动备份按钮点击（click）事件
        $("#up").bind('click', function () {
            // 切换启动和停止按钮
            $("#down").show();
            $("#restart").show();
            $("#up").hide();

            // 向服务端发送启动自动备份请求
            post({
                backup_time: $("#datetimepicker").val(),//自动备份时间
                mode: "1",// 模式0：自动备份
            }, (data) => {
                if (data['success']) {
                    toastr.info('自动备份已启动！')
                }
            });
        });

        // 绑定停止自动备份按钮点击（click）事件
        $("#down").bind('click', function () {
            // 控制按钮显示与隐藏
            $("#up").show();
            $("#restart").hide();
            $("#down").hide();

            // 向服务端发送停止自动备份请求
            post({
                mode: "2",// 模式1：停止自动备份任务
            }, (data) => {
                if (data['success']) {
                    toastr.warning('自动备份已停止！')
                }
            });
        })

        // 绑定重启自动备份按钮点击（click）事件
        $("#restart").bind('click', function () {
            // 向服务端发送重启自动备份请求
            post({
                backup_time: $("#datetimepicker").val(),//自动备份时间
                mode: "3",// 模式2：重启自动备份任务
            }, (data) => {
                if (data['success']) {
                    toastr.info('自动备份已重启！');
                }
            });
        });

        // 绑定手动备份按钮点击事件
        $('#bt_manual').bind('click', function () {
            $('#bt_manual_icon').attr("class", "fa fa-spinner fa-spin")
            post({
                mode: "4",// 模式3：手动备份
            }, (data) => {
                $('#bt_manual_icon').attr("class", "fa fa-cog")
                if (data['success']) {
                    toastr.info('数据已备份，请到备份目录查看[' + data["msg"] + ']')
                } else {
                    toastr.error('备份数据库发生错误（' + data['msg'] + ')')
                }
            });
        })

    });
</script>

</html>